﻿<div class="animated fadeIn">
  <div class="row">
    <div class="col-sm-12">
      <div class="card card-accent-default">
        <div class="card-header">
          <strong>Grid</strong>
        </div>
        <div class="card-block">
          <kendo-grid [kendoGridBinding]="products" [height]="400" (excelExport)="onExcelExport($event)">
            <ng-template kendoGridToolbarTemplate>
              <button type="button" kendoGridExcelCommand><span class="k-icon k-i-file-excel"></span>Export to Excel</button>
            </ng-template>
            <kendo-grid-column field="ProductID" [locked]="true" title="Product ID" [width]="200">
            </kendo-grid-column>
            <kendo-grid-column field="ProductName" title="Product Name" [width]="350">
            </kendo-grid-column>
            <kendo-grid-column-group title="Availability" [width]="360">
              <kendo-grid-column field="UnitPrice" title="Unit Price" [width]="120">
              </kendo-grid-column>
              <kendo-grid-column field="UnitsOnOrder" title="Units On Order" [width]="120">
              </kendo-grid-column>
              <kendo-grid-column field="UnitsInStock" title="Units In Stock" [width]="120">
              </kendo-grid-column>
            </kendo-grid-column-group>
            <kendo-grid-column field="Discontinued" width="120">
            </kendo-grid-column>
            <kendo-grid-excel fileName="Products.xlsx"></kendo-grid-excel>
          </kendo-grid>
        </div>
      </div>
    </div>
    <!--/.col-->
  </div>
  <!--/.row-->
</div>
